<template>
  <div class="min-h-screen" style="background-color: #FAF9F5;">
    <!-- 顶部欢迎区域 -->
    <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white">
      <div class="px-4 py-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-xl font-bold">欢迎，{{ studentInfo?.name || '同学' }}！</h1>
            <p class="text-blue-100 text-sm mt-1">{{ studentInfo?.major || '专业信息' }} · {{ studentInfo?.className || '班级信息' }}</p>
          </div>
          <div class="text-right">
            <p class="text-sm text-blue-100">学号</p>
            <p class="font-medium">{{ studentInfo?.studentId || '暂无' }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 报到进度卡片 -->
    <div class="px-4 py-4">
      <div class="rounded-[0.6rem] p-6 border border-gray-200 mb-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-semibold text-gray-900">报到进度</h2>
          <span :class="[
            'px-3 py-1 rounded-full text-sm font-medium',
            registrationStatus === 'completed' ? 'bg-green-100 text-green-800' :
            registrationStatus === 'in-progress' ? 'bg-yellow-100 text-yellow-800' :
            'bg-gray-100 text-gray-800'
          ]">
            {{ registrationStatusText }}
          </span>
        </div>
        
        <!-- 进度条 -->
        <div class="mb-4">
          <div class="flex justify-between text-sm text-gray-600 mb-2">
            <span>完成进度</span>
            <span>{{ progressPercentage }}%</span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
            <div 
              class="bg-blue-500 h-2 rounded-full transition-all duration-300"
              :style="{ width: progressPercentage + '%' }"
            ></div>
          </div>
        </div>
        
        <!-- 进度步骤 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div 
            v-for="step in registrationSteps" 
            :key="step.key"
            class="text-center"
          >
            <div :class="[
              'w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2',
              step.completed ? 'bg-green-500 text-white' :
              step.current ? 'bg-blue-500 text-white' :
              'bg-gray-200 text-gray-400'
            ]">
              <i :class="step.icon + ' w-5 h-5'"></i>
            </div>
            <p class="text-xs font-medium text-gray-900">{{ step.title }}</p>
            <p class="text-xs text-gray-500 mt-1">{{ step.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能宫格 -->
    <div class="px-4">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">服务功能</h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
        <router-link
          v-for="feature in features"
          :key="feature.key"
          :to="feature.to"
          class="rounded-[0.6rem] p-4 border border-gray-200 hover:border-gray-400 transition-all duration-200 hover:-translate-y-1 active:scale-[0.985]"
          style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
        >
          <div class="text-center">
            <div :class="[
              'w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3',
              feature.bgColor
            ]">
              <i :class="[feature.icon, 'w-6 h-6', feature.iconColor]"></i>
            </div>
            <p class="text-sm font-medium text-gray-900">{{ feature.title }}</p>
            <p class="text-xs text-gray-500 mt-1">{{ feature.description }}</p>
            <span 
              v-if="feature.badge" 
              class="inline-block mt-2 px-2 py-0.5 bg-red-100 text-red-600 text-xs rounded-full"
            >
              {{ feature.badge }}
            </span>
          </div>
        </router-link>
      </div>
    </div>

    <!-- 重要通知 -->
    <div class="px-4 mb-6">
      <div class="rounded-[0.6rem] p-6 border border-gray-200" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-semibold text-gray-900">重要通知</h2>
          <router-link 
            to="/student/notices" 
            class="text-sm text-blue-600 hover:text-blue-700"
          >
            查看全部
          </router-link>
        </div>
        
        <div class="space-y-4">
          <div 
            v-for="notice in importantNotices" 
            :key="notice.id"
            class="flex items-start space-x-3 p-3 rounded-[0.6rem] hover:border-gray-400 transition-all duration-200 cursor-pointer border border-gray-200"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            @click="viewNotice(notice)"
          >
            <div class="w-2 h-2 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium text-gray-900 truncate">
                {{ notice.title }}
              </p>
              <p class="text-xs text-gray-500 mt-1 line-clamp-2">
                {{ notice.content }}
              </p>
              <p class="text-xs text-gray-400 mt-1">
                {{ formatTime(notice.publishTime) }}
              </p>
            </div>
          </div>
          
          <div v-if="!importantNotices.length" class="text-center py-4">
            <i class="icon-[heroicons--document-text] w-8 h-8 text-gray-400 mx-auto mb-2"></i>
            <p class="text-sm text-gray-500">暂无重要通知</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人信息卡片 -->
    <div class="px-4 mb-6">
      <div class="rounded-[0.6rem] p-6 border border-gray-200" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-semibold text-gray-900">个人信息</h2>
          <router-link 
            to="/student/profile" 
            class="text-sm text-blue-600 hover:text-blue-700"
          >
            查看详情
          </router-link>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-3">
            <div>
              <label class="block text-xs font-medium text-gray-500 mb-1">姓名</label>
              <p class="text-sm text-gray-900">{{ studentInfo?.name || '暂无' }}</p>
            </div>
            <div>
              <label class="block text-xs font-medium text-gray-500 mb-1">学号</label>
              <p class="text-sm text-gray-900">{{ studentInfo?.studentId || '暂无' }}</p>
            </div>
            <div>
              <label class="block text-xs font-medium text-gray-500 mb-1">手机号码</label>
              <p class="text-sm text-gray-900">{{ studentInfo?.phone || '暂无' }}</p>
            </div>
          </div>
          <div class="space-y-3">
            <div>
              <label class="block text-xs font-medium text-gray-500 mb-1">专业</label>
              <p class="text-sm text-gray-900">{{ studentInfo?.major || '暂无' }}</p>
            </div>
            <div>
              <label class="block text-xs font-medium text-gray-500 mb-1">班级</label>
              <p class="text-sm text-gray-900">{{ studentInfo?.className || '暂无' }}</p>
            </div>
            <div>
              <label class="block text-xs font-medium text-gray-500 mb-1">身份证号</label>
              <p class="text-sm text-gray-900">{{ maskIdCard(studentInfo?.idCard) || '暂无' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 紧急联系人卡片 -->
    <div class="px-4 mb-6">
      <div class="rounded-[0.6rem] p-6 border border-gray-200" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-semibold text-gray-900">紧急联系人</h2>
          <router-link 
            to="/student/info-submit" 
            class="text-sm text-blue-600 hover:text-blue-700"
          >
            编辑信息
          </router-link>
        </div>
        
        <div v-if="emergencyContacts.length === 0" class="text-center py-8 text-gray-500">
          <i class="icon-[heroicons--users] w-12 h-12 mx-auto mb-2 text-gray-300"></i>
          <p class="text-sm">暂无紧急联系人信息</p>
          <router-link 
            to="/student/info-submit" 
            class="inline-block mt-2 text-sm text-blue-600 hover:text-blue-700"
          >
            立即添加
          </router-link>
        </div>
        
        <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div 
            v-for="(contact, index) in emergencyContacts" 
            :key="index"
            class="p-4 border border-gray-200 rounded-lg bg-gray-50"
          >
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <div class="flex items-center mb-2">
                  <i class="icon-[heroicons--user] w-4 h-4 text-gray-500 mr-2"></i>
                  <h3 class="text-sm font-medium text-gray-900">{{ contact.name }}</h3>
                </div>
                <div class="space-y-1">
                  <div class="flex items-center text-xs text-gray-600">
                    <i class="icon-[heroicons--heart] w-3 h-3 mr-1"></i>
                    <span>{{ contact.relationship }}</span>
                  </div>
                  <div class="flex items-center text-xs text-gray-600">
                    <i class="icon-[heroicons--phone] w-3 h-3 mr-1"></i>
                    <span>{{ contact.phone }}</span>
                  </div>
                  <div v-if="contact.workplace" class="flex items-center text-xs text-gray-600">
                    <i class="icon-[heroicons--building-office] w-3 h-3 mr-1"></i>
                    <span>{{ contact.workplace }}</span>
                  </div>
                </div>
              </div>
              <a
                :href="`tel:${contact.phone}`"
                class="p-2 bg-blue-100 rounded-lg text-blue-600 hover:bg-blue-200 transition-colors ml-3"
              >
                <i class="icon-[heroicons--phone] w-4 h-4"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷联系 -->
    <div class="px-4 pb-6">
      <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">需要帮助？</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <button
            @click="callPhone('400-123-4567')"
            class="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
          >
            <i class="icon-[heroicons--phone] w-5 h-5 text-blue-600"></i>
            <div class="text-left">
              <p class="text-sm font-medium text-gray-900">招生办电话</p>
              <p class="text-xs text-gray-500">400-123-4567</p>
            </div>
          </button>
          
          <button
            @click="sendEmail('admission@university.edu.cn')"
            class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
          >
            <i class="icon-[heroicons--envelope] w-5 h-5 text-green-600"></i>
            <div class="text-left">
              <p class="text-sm font-medium text-gray-900">邮箱咨询</p>
              <p class="text-xs text-gray-500">admission@university.edu.cn</p>
            </div>
          </button>
          
          <router-link
            to="/student/contact"
            class="flex items-center space-x-3 p-3 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors"
          >
            <i class="icon-[heroicons--chat-bubble-left-right] w-5 h-5 text-purple-600"></i>
            <div class="text-left">
              <p class="text-sm font-medium text-gray-900">在线客服</p>
              <p class="text-xs text-gray-500">点击进入</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStudentStore } from '../../stores/student'
import { useAppStore } from '../../stores/app'
import dayjs from 'dayjs'

// 使用stores和路由
const studentStore = useStudentStore()
const appStore = useAppStore()
const router = useRouter()

// 计算属性
const studentInfo = computed(() => studentStore.studentInfo)
const registrationStatus = computed(() => studentStore.registrationStatus)

const registrationStatusText = computed(() => {
  const statusMap = {
    'not-started': '未开始',
    'in-progress': '进行中',
    'completed': '已完成'
  }
  return statusMap[registrationStatus.value] || '未知状态'
})

// 报到步骤
const registrationSteps = ref([
  {
    key: 'info',
    title: '信息确认',
    description: '核对个人信息',
    icon: 'icon-[heroicons--user-circle]',
    completed: true,
    current: false
  },
  {
    key: 'contact',
    title: '联系人信息',
    description: '填写紧急联系人',
    icon: 'icon-[heroicons--users]',
    completed: true,
    current: false
  },
  {
    key: 'payment',
    title: '在线缴费',
    description: '完成费用缴纳',
    icon: 'icon-[heroicons--currency-yen]',
    completed: false,
    current: true
  },
  {
    key: 'dormitory',
    title: '宿舍分配',
    description: '确认住宿安排',
    icon: 'icon-[heroicons--home]',
    completed: false,
    current: false
  }
])

// 计算进度百分比
const progressPercentage = computed(() => {
  const completedSteps = registrationSteps.value.filter(step => step.completed).length
  return Math.round((completedSteps / registrationSteps.value.length) * 100)
})

// 功能宫格
const features = ref([
  {
    key: 'info-submit',
    title: '信息提交',
    description: '核对个人信息',
    icon: 'icon-[heroicons--document-text]',
    bgColor: 'bg-blue-100',
    iconColor: 'text-blue-600',
    to: '/student/info-submit'
  },
  {
    key: 'payment',
    title: '在线缴费',
    description: '缴纳各项费用',
    icon: 'icon-[heroicons--currency-yen]',
    bgColor: 'bg-green-100',
    iconColor: 'text-green-600',
    to: '/student/payment',
    badge: '待缴费'
  },
  {
    key: 'info-query',
    title: '信息查询',
    description: '查看个人档案',
    icon: 'icon-[heroicons--magnifying-glass]',
    bgColor: 'bg-purple-100',
    iconColor: 'text-purple-600',
    to: '/student/info-query'
  },
  {
    key: 'schedule',
    title: '日程安排',
    description: '查看报到安排',
    icon: 'icon-[heroicons--calendar-days]',
    bgColor: 'bg-yellow-100',
    iconColor: 'text-yellow-600',
    to: '/student/schedule'
  },
  {
    key: 'notices',
    title: '通知公告',
    description: '查看最新通知',
    icon: 'icon-[heroicons--megaphone]',
    bgColor: 'bg-red-100',
    iconColor: 'text-red-600',
    to: '/student/notices'
  },
  {
    key: 'contact',
    title: '联系我们',
    description: '获取帮助支持',
    icon: 'icon-[heroicons--phone]',
    bgColor: 'bg-gray-100',
    iconColor: 'text-gray-600',
    to: '/student/contact'
  }
])

// 重要通知数据
const importantNotices = ref([
  {
    id: 1,
    title: '2024年新生报到须知',
    content: '请各位新生按照规定时间完成报到手续，携带相关证件材料...',
    publishTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)
  },
  {
    id: 2,
    title: '宿舍分配结果公布',
    content: '2024年新生宿舍分配结果已公布，请登录系统查看具体安排...',
    publishTime: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000)
  },
  {
    id: 3,
    title: '缴费截止时间提醒',
    content: '请尚未完成缴费的同学尽快完成相关费用缴纳，截止时间为...',
    publishTime: new Date(Date.now() - 6 * 60 * 60 * 1000)
  }
])

// 紧急联系人数据
const emergencyContacts = ref([
  {
    name: '张父',
    relationship: '父亲',
    phone: '13800138001',
    workplace: '某某公司'
  },
  {
    name: '李母',
    relationship: '母亲',
    phone: '13800138002',
    workplace: '某某医院'
  }
])

// 方法
const formatTime = (time) => {
  return dayjs(time).format('MM-DD HH:mm')
}

const viewNotice = (notice) => {
  // 跳转到通知详情页面
  router.push(`/student/notices/${notice.id}`)
}

const callPhone = (phone) => {
  window.open(`tel:${phone}`)
}

const sendEmail = (email) => {
  window.open(`mailto:${email}`)
}

const maskIdCard = (idCard) => {
  if (!idCard) return ''
  return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
}

// 生命周期
onMounted(async () => {
  // 设置页面标题
  appStore.setPageTitle('学生首页')
  
  // 初始化学生数据
  await studentStore.initStudentData()
  
  // 模拟学生信息
  studentStore.studentInfo = {
    name: '张三',
    studentId: '2024001001',
    major: '计算机科学与技术',
    className: '计科2024-1班',
    phone: '13800138000',
    idCard: '110101199001011234'
  }
})
</script>

<style scoped>
@reference "tailwindcss";

/* 自定义样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 动画效果 */
.hover\:-translate-y-1:hover {
  transform: translateY(-4px);
}
</style>